
img{
    display: block;
    width:100%;
    height:100%;
}



/* <!--顶层导航上的产品官网 --> */
.top-banner{
    width:100%;
    border:1px solid red;
}
.top-banner-cen{
    width:1920px;
    margin:0 auto;
    height:90px;
    /* text-align: center; */
    border:1px solid blue;
}
.fangda-banner-navv{
    background-color: chocolate;
}
.banner-pic1{
    width:100%;
    height:100%;
}
/* <!-- 导航层 --> */
.nav{
    width:100%;
    
    border:1px solid green;
    /* background-color:orange; */
}
.nav-cen{
    width:1920px;
    margin:0 auto;
    height:36px;
    border:1px solid pink;
    background-color: black;
}
.top-banner-lef >ul{
    display:flex;
    align-items: flex-start; 
    margin-right:500px;  
}
 
.navul1> li {
    margin:4px 10px 4px 10px;
    float:left;
    /* height: 30px; */
    line-height:36px;
    text-align: center; 
}
.navul1 li a{
    color:gainsboro;
    font-size: 16px;
}
.shu{
    height:36px;
    color:red;
}

/* <!-- 右侧导航 -->  <!-- 注册登录部分 --> */
.top-banner-rig{
    display:flex;
    float:right;
    align-items: flex-start; 
}

.navul2 li{
    float:left;
    margin:4px 10px 4px 10px;
    /* height: 30px; */
    line-height:36px;
    text-align: center;
}
.navul2 li a{
    color:gainsboro;
    font-size: 16px;
}
.navli2{
    margin-left:50px;
}
/* <!--华为商城-- 搜索栏--> */
.search{
    width:100%;
    height:50px;
    border:1px solid greenyellow;
}
.search-cen{
    width:1920px;
    margin:0 auto;
    height:50px;
    /* float: left; */
    border:1px solid rgb(47, 85, 255);
}
/* 官网产品图片 */
.search-img{
    width:320px;
    height:50px;
    float: left;
}
.search-img img{
    width:100%;
    height:100%;
}
/* <!-- 华为专区 --> */
.search-nav{
    font-size:20px;
    line-height: 50px;
    margin:0 10px;
}
.searchul3 li{
    float: left;
    margin-left:20px;
}
.searchul3 li a{
    color:black;


}
.searchul3 li a:hover{
    color:red;
    
}
.searchul3-active{
    background-color: gold;
    border-radius: 20px;
}
/* <!-- 搜索框 --> */
.searchwer{
    width:240px;
    height:30px;
    float:right;
    margin-top:5px;
    border-radius: 15px;
    border:1px solid gray;
    /* background-color: grey; */
}
.searchwer p{
    margin:0 10px;
    line-height:30px;
    color:black;
}

.big{
    width:1920px;
    height: 1100px;
    border:1px solid rebeccapurple;
    display: flex;
    justify-content: space-between;
}
/* <!-- 左侧放大镜 --> */
.box{
    width:900px;
    display: flex;
    position: relative;
    margin:100px 100px;
    flex-direction: column;
    /* border:1px solid red; */
}
.showtime{
    width:400px;
    height:400px;
    border:5px solid orange;
}
.cover{
    width:200px;
    height:200px;
    background: rgba(240,200,135,0.8);
    position: absolute;
    top:0;
    left:0;
    display: none;
}
.list{
    width:100%;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.list>li{
    width: 80px;
    height: 80px;
    margin:30px 0 0 30px;
}
.list>li.active{
    border:2px solid red;
}
.magnify{
    width: 800px;
    height: 800px;
    position: absolute;
    top:0;
    left:450px;
    border:3px solid green ;
    background-image: url(../img/1.big.jpg);
    background-repeat: no-repeat;
    background-size: 1600px 1600px;
    display: none;
}

.pro{
    width:1300px;
    height:900px;
    padding-right:200px;
    padding-top:100px;
    border:1px solid  chocolate;
}
.pro-title{
    font-size: 46px;
    overflow: hidden;
    margin-bottom: 10px;
}
.pro-slogan{
    font-size: 24px;
    line-height: 20px;
}
.price{
    margin-top:30px;
    height:200px;
    width:1000px;
    border:1px solid red;
    padding:20px 50px;
}
.pro-price,.pro-lan{
    height:60px;
    font-size: 30px;
    line-height: 40px;
    font-weight: bold;
}

.pro-info{
    margin-top:30px;
    height:200px;
    width:1000px;
    border:1px solid red;
    padding:20px 50px;
}
.info-dress{
    height:30px;
    font-size: 30px;
    line-height: 40px;
    font-weight: bold;
}
.info-box{
    width:800px;
    height:30px;
    display: flex;
    justify-content: space-between;
    font-size: 30px;
}
.info-box span{
    display: block;

}
.info-y{
    float:right;
}
.info-math{
    width:80px;
    height: 40px;
    margin-left:30px;
}
.info-y li{
  width:70px;
  height:50px;
  text-align: center;
  border:1px solid red;
  font-size: 40px;
  font-weight: bold;
  float: left;
}
.info-buy{
    width:500px;
    height:50px;
    display: flex;
    justify-content: space-between;
    font-size: 40px;
    border:1px solid  red;
    padding:20px 20px;
    margin-left:200px;
    margin-top:50px;
}

.buy{
    padding:0 30px;
    border-right:1px solid red
}

.bottom{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:60px;
}

.bottom-cen{
    height:40px;
    width:1920px;
    margin:0 auto;
    border:1px solid red;
    margin-top:20px;
    overflow: hidden;
}
.bottom-cenn{
    
    /* position:absolute; */
    /* top:0; */
    /* left:300px;   */
    background-color: rgb(224, 212, 212);  
}
.bottom-li{
    float: left;
    margin:10px 100px;
    text-align: center;
}